<template>
  <div id='login'>
    <div id='center'>
      <h1>商城管理后台</h1>
      <el-form ref="form" :model="form" label-width="60px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" @keyup.native.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" @keyup.native.enter="onSubmit"></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import date from "../components/package";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      jurisdiction: "",
    };
  },
  methods: {
    onSubmit(event) {
      //使输入框失去焦点
      event.target.blur();
      this.$axios({
        url: "/login",
        params: this.form,
      }).then((res) => {
        if (res.data.data[0]) {
          res.data.data[0].logintime = date.nowDateFn();
          if (
            res.data.data[0].enable == "是" &&
            res.data.data[0].roleEnable == "是"
          ) {
            if (res.data.data[0].jurisdiction) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$store.commit("changeUser", res.data.data[0]);
              this.jurisdiction = JSON.parse(
                this.$store.state.usermsg.jurisdiction
              );
              this.$store.commit(
                "changePage",
                this.jurisdiction[0].path
              );
              sessionStorage.setItem(
                "store",
                JSON.stringify(this.$store.state)
              );
              this.$router.replace({
                path: this.jurisdiction[0].path,
              });
              this.$axios({
                url: "/logintime",
                method: "post",
                data: res.data.data[0],
              });
            } else {
              this.$message({
                message: "角色还未有权限",
                type: "warning",
              });
            }
          } else {
            this.$message({
              message: "用户已被禁用，无法登陆，请联系管理员",
              type: "warning",
            });
          }
        } else {
          this.open();
        }
      });
    },
    open() {
      this.$alert("账户或密码有误", "提示", {
        confirmButtonText: "确定",
      });
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  height: 100%;
  width: 100%;
  background-image: url("../assets/logn.jpg");
  position: relative;
}
#center {
  background-color: rgba(255, 255, 255, 0.5);
  height: 400px;
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  h1 {
    text-align: center;
    color: rgb(102, 177, 255);
    margin-bottom: 80px;
  }
  /deep/ .el-form-item__label {
    color: black;
    font-weight: 600;
  }
  .el-button {
    width: 100%;
    margin: 40px auto;
  }
}
</style>

